<template>
  <div class="food-detail">
    <!-- 基本信息 -->
    <div class="detail-section">
      <h3>基本信息</h3>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">中文名称:</span>
          <span class="value">{{ food.name_zh }}</span>
        </div>
        <div class="info-item">
          <span class="label">英文名称:</span>
          <span class="value">{{ food.name_en }}</span>
        </div>
        <div class="info-item">
          <span class="label">类型:</span>
          <n-tag :color="food.is_system ? { color: '#f0f0f0', textColor: '#666' } : { color: '#e6f7ff', textColor: '#1890ff' }">
            {{ food.is_system ? '系统预设' : '用户自定义' }}
          </n-tag>
        </div>
      </div>
    </div>

    <!-- 按大分类展示营养素 -->
    <div
      v-for="group in nutrientGroups"
      :key="group.majorCategory.category_id"
      class="detail-section"
      v-show="hasNutrientsInGroup(group)"
    >
      <h3>
        {{ group.majorCategory.category_name }} (每100g)
        <span class="category-description">{{ group.majorCategory.category_description }}</span>
      </h3>
      <div class="nutrients-grid">
        <div
          v-for="field in group.fields"
          :key="field.key"
          v-show="food[field.key as keyof Food] !== undefined"
          class="nutrient-item"
        >
          <div class="nutrient-header">
            <span class="nutrient-name">{{ field.label }}</span>
            <n-tag
              v-if="food[(field.key + '_rich') as keyof Food]"
              :type="getNutrientTagType(group.majorCategory.category_id)"
              size="small"
            >
              富含
            </n-tag>
          </div>
          <div class="nutrient-value">
            {{ formatNutrientValue(food[field.key as keyof Food]) }} {{ field.unit }}
          </div>
        </div>
      </div>
    </div>

    <!-- 其他营养素 -->
    <div class="detail-section" v-if="food.other_nutrients && food.other_nutrients.length > 0">
      <h3>其他营养素 (每100g)</h3>
      <div class="nutrients-grid">
        <div v-for="nutrient in food.other_nutrients" :key="nutrient.nutrient_id" class="nutrient-item">
          <div class="nutrient-header">
            <span class="nutrient-name">{{ nutrient.name_zh }}</span>
            <n-tag v-if="nutrient.rich" type="info" size="small">富含</n-tag>
          </div>
          <div class="nutrient-value">{{ nutrient.amount }} {{ nutrient.unit }}</div>
        </div>
      </div>
    </div>

    <div v-if="showCloseButton" class="detail-actions">
      <n-button @click="$emit('close')">关闭</n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Food } from '@/types'
import { getNutrientFieldGroups, type NutrientFieldGroup } from '@/data/nutrientCategories'

interface Props {
  food: Food
  showCloseButton?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showCloseButton: true
})

// 获取营养素分组
const nutrientGroups = getNutrientFieldGroups()

/**
 * 检查某个分组是否有营养素数据
 */
const hasNutrientsInGroup = (group: NutrientFieldGroup): boolean => {
  return group.fields.some(field => props.food[field.key as keyof Food] !== undefined)
}

/**
 * 格式化营养素数值
 */
const formatNutrientValue = (value: any): string => {
  if (value === undefined || value === null) return '-'
  if (typeof value === 'number') {
    return value.toFixed(2).replace(/\.?0+$/, '')
  }
  return String(value)
}

/**
 * 根据大分类ID获取标签类型
 */
const getNutrientTagType = (categoryId: number): 'success' | 'info' | 'warning' | 'error' | 'primary' | 'default' => {
  switch (categoryId) {
    case 1: // 宏量营养素
      return 'success'
    case 2: // 微量营养素
      return 'primary'
    case 3: // 其他重要膳食成分
      return 'warning'
    default:
      return 'info'
  }
}
</script>

<style scoped>
.food-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-description {
  font-size: 12px;
  font-weight: 400;
  color: #999;
  margin-left: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item .label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
}

.info-item .value {
  color: #333;
}

.nutrients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.nutrient-item {
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
}

.nutrient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.nutrient-name {
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

.nutrient-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .nutrients-grid {
    grid-template-columns: 1fr;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-item .label {
    min-width: auto;
  }
}
</style>
